<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
<h:body>
	<ui:composition template="/template.xhtml">
		<ui:define name="header">
			<style type="text/css">
				@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
				.fa.pull-right {
				    margin-left: 0.1em;   
				}
				.date-picker,
				.date-container {
				    position: relative;
				    display: inline-block;
				    width: 100%;
				    color: rgb(75, 77, 78);
				    -webkit-touch-callout: none;
				    -webkit-user-select: none;
				    -moz-user-select: none;
				    -ms-user-select: none;
				    user-select: none;
				}
				.date-container {
				    padding: 0px 40px;   
				}
				.date-picker h2, .date-picker h4 {
				    margin: 0px;
				    padding: 0px;
				    font-family: 'Roboto', sans-serif;
				    font-weight: 200;
				}
				.date-container .date {
				    text-align: center;
				}
				.date-picker span.fa {
				    position: absolute;
				    font-size: 4em;
				    font-weight: 100;
				    padding: 8px 0px 7px;
				    cursor: pointer;
				    top: 0px;
				}
				.date-picker span.fa[data-type="subtract"] {
				    left: 0px;
				}
				.date-picker span.fa[data-type="add"] {
				    right: 0px;
				}
				.date-picker span[data-toggle="calendar"] {
				    display: block;
				    position: absolute;
				    top: -7px;
				    right: 45px;
				    font-size: 1em !important;
				    cursor: pointer;
				}
				
				.date-picker .input-datepicker {
				    display: none;
				    position: absolute;
				    top: 50%;
				    margin-top: -17px;
				    width:100%;
				}
				.date-picker .input-datepicker.show-input {
				    display: table;
				}
				
				@media (min-width: 768px) and (max-width: 1010px) {
				    .date-picker h2{
				        font-size: 1.5em; 
				        font-weight: 400;  
				    }    
				    .date-picker h4 {
				        font-size: 1.1em;
				    }  
				    .date-picker span.fa {
				        font-size: 3em;
				    } 
				}	
				body {background-image: ;}
			</style>
		</ui:define>
		<ui:define name="body">
			<f:event listener="#{userMenu.selectM1G2}" type="preRenderView"></f:event>
			<!-- NAVIGATOR -->
        	<ui:insert><ui:include src="nav.xhtml" /></ui:insert>
        	
			<div class="container">
				<!-- Main component for a primary marketing message or call to action -->
				<div class="row">
					<div class="col-xs-9">
		
						<div class="page-header">
							<h1>
								审核条目 <small>对已提交条目进行编辑审核发布</small>
							</h1>
						</div>
						<h:messages infoClass="alert alert-success" errorClass="text-danger"></h:messages>
						<h:form styleClass="form-horizontal" p:role="form">
							<div class="form-group">
								<div class="col-sm-12">
									<label for="inputTitle" class="col-sm-2 control-label">输入检索标题</label>
								    <div class="col-sm-10">
								      <h:inputText p:id="inputTitle" value="#{candidateStoryReviewAction.queryTitle}" styleClass="form-control" p:placeholder="输入检索标题，留空即为检索全部" required="false"></h:inputText>
								    </div>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-12">
									<h:commandLink action="#{candidateStoryReviewAction.loadCandidateStory}" styleClass="btn btn-primary btn-lg btn-block">
										<span class="glyphicon glyphicon-refresh"></span> 加载最新条目
									</h:commandLink>
								</div>
							</div>
						</h:form>
						<div class="table-responsive">
							<h:dataTable styleClass="table table-bordered table-hover"
								value="#{candidateStoryReviewAction.candidateStoryList}"
								var="data"
								rendered="#{not empty candidateStoryReviewAction.candidateStoryList}">
								<h:column headerClass="col-sm-1">
									<f:facet name="header">状态</f:facet>
									<span class="label label-warning"><h:outputText
											value="未审核" rendered="#{data.reviewStatus == 1}" /></span>
									<span class="label label-primary"><h:outputText
											value="已审核" rendered="#{data.reviewStatus == 2}" /></span>
									<span class="label label-success"><h:outputText
											value="已发布" rendered="#{data.reviewStatus == 3}" /></span>
									<span class="label label-default"><h:outputText
											value="已屏蔽" rendered="#{data.reviewStatus == 4}" /></span>
								</h:column>
								<h:column headerClass="col-sm-1">
									<f:facet name="header">分类</f:facet>
									<span class="label label-info"><h:outputText
											value="#{data.categoryName}" /></span>
								</h:column>
								<h:column headerClass="col-sm-4">
									<f:facet name="header">标题</f:facet>
									<h:outputText value="#{data.title}"></h:outputText>
								</h:column>
								<h:column headerClass="col-sm-1">
									<f:facet name="header">创建者</f:facet>
									<h:outputText value="#{data.createUserName}"></h:outputText>
								</h:column>
								<h:column headerClass="col-sm-2">
									<f:facet name="header">创建日期</f:facet>
									<h:outputText value="#{data.createTime}">
										<f:convertDateTime pattern="yyyy-MM-dd HH:mm" timeZone="GMT+8" />
									</h:outputText>
								</h:column>
								<h:column headerClass="col-sm-4">
									<f:facet name="header">编辑发布</f:facet>
									<h:form>
										<h:link target="_blank" outcome="additem.faces?id=#{data.id}" styleClass="btn btn-default" rendered="#{data.reviewStatus eq 1}">
											<span class="glyphicon glyphicon-edit"></span> 修改
										</h:link>
										<h:commandLink styleClass="btn btn-primary" style="margin-left: 2px" action="#{candidateStoryReviewAction.loadSingleStory}" rendered="#{data.reviewStatus eq 1}"> 
											<span class="glyphicon glyphicon-eye-open"></span> 审核
											<f:setPropertyActionListener target="#{candidateStory.id}" value="#{data.id}"></f:setPropertyActionListener>
											<f:ajax execute="@this" render=":modal_form:preview_block" onevent="function(x){if (x.status == 'success'){$('#reviewModal').modal('show');}}"></f:ajax>
										</h:commandLink>
										<h:commandLink style="margin-left: 2px" styleClass="btn btn-danger" action="#{candidateStoryReviewAction.deleteStory}" rendered="#{data.reviewStatus eq 1}" onclick="javascript:if (confirm('确定删除吗？')) { return true;}else{return false;};">
											<span class="glyphicon glyphicon-edit"></span> 删除
											<f:setPropertyActionListener target="#{candidateStory.id}" value="#{data.id}"></f:setPropertyActionListener>
										</h:commandLink>
										<h:commandLink style="margin-left: 2px" styleClass="btn btn-success" action="#{candidateStoryReviewAction.loadSingleStory}" rendered="#{data.reviewStatus eq 2}">
											<span class="glyphicon glyphicon-send"></span> 发布
											<f:setPropertyActionListener target="#{candidateStory.id}" value="#{data.id}"></f:setPropertyActionListener>
											<f:ajax execute="@this" render=":date_picker_form:date_picker_block" onevent="function(x){if (x.status == 'success'){initComponent();$('#datePickerModal').modal('show');}}"></f:ajax>
										</h:commandLink>
										<h:commandLink style="margin-left: 2px"
											styleClass="btn btn-danger" action="#{candidateStoryReviewAction.deletePublishedStory}"
											rendered="#{data.reviewStatus eq 3}">
											<f:setPropertyActionListener target="#{candidateStory.id}" value="#{data.id}"></f:setPropertyActionListener>
											<span class="glyphicon glyphicon-ban-circle"></span> 撤销发布
										</h:commandLink>
									</h:form>
								</h:column>
							</h:dataTable>
						</div>
		
						<!-- PAGING REGION -->
						<h:form
							rendered="#{not empty candidateStoryReviewAction.candidateStoryList}">
							<div>
								<ul class="pagination pagination-lg">
									<li class="previous"><h:commandLink
											action="#{candidateStoryReviewAction.loadPrePage()}">
											<span class="glyphicon glyphicon glyphicon-chevron-left"></span> 上一页
					            </h:commandLink></li>
		
									<c:forEach items="#{pageObject.listPageNo}" var="pageNoList">
										<li
											class="#{pageObject.currentPageNumber == pageNoList ? 'active' : ''}">
											<h:commandLink
												action="#{candidateStoryReviewAction.loadSpecifiedPage()}"
												value="#{pageNoList}">
												<f:setPropertyActionListener
													target="#{pageObject.currentPageNumber}"
													value="#{pageNoList}" />
											</h:commandLink>
										</li>
									</c:forEach>
		
									<li class="next"><h:commandLink
											action="#{candidateStoryReviewAction.loadNextPage()}">
					              下一页 <span
												class="glyphicon glyphicon glyphicon-chevron-right"></span>
										</h:commandLink></li>
								</ul>
							</div>
						</h:form>
					</div>
		
					<!-- Right Panel -->
					<div class="col-xs-3">
						<!-- COMMON-INFO -->
        				<ui:insert><ui:include src="common-info.xhtml" /></ui:insert>
        				
						<div class="panel panel-primary">
							<div class="panel-heading">
					          <h3 class="panel-title">过去7天发布数统计</h3>
					        </div>
							<ul class="list-group">
								<c:forEach items="#{candidateStoryReviewAction.lastSevenDayPublishCount}" var="data" varStatus="status">
									<li class="list-group-item">
									<c:if test="#{data[1] eq 0}">
										<span class="label label-danger pull-right"><h:outputText value="#{data[1]}" /></span>
									</c:if>
									<c:if test="#{data[1] eq 1 or data[1] eq 2}">
										<span class="label label-warning pull-right"><h:outputText value="#{data[1]}" /></span>
									</c:if>
									<c:if test="#{data[1] gt 2}">
										<span class="label label-success pull-right"><h:outputText value="#{data[1]}" /></span>
									</c:if>
									<h:outputText value="#{data[0]}" />
									</li>
								</c:forEach>
							</ul>
						</div>
						
						<h:form styleClass="form-horizontal" p:role="form">
							<div class="form-group">
								<div class="col-sm-12">
									<h:link target="_blank" outcome="publishstat.faces" styleClass="btn btn-primary btn-lg btn-block"><span class="glyphicon glyphicon-stats"></span> 其他时段发布状态查看</h:link>
								</div>
							</div>
						</h:form>
					</div>
				</div>
				<!-- end row -->
			</div>
			<!-- end container -->
			
			<!-- Modal -->
			<h:form id="modal_form">
			<h:panelGroup layout="block" id="preview_block">
			<div class="modal fade" id="reviewModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			        <h4 class="modal-title" id="myModalLabel"><h:outputText value="#{candidateStory.title}" /></h4>
			        <p><br /><h:outputText value="#{candidateStory.comment}" /></p>
			      </div>
			      <div class="modal-body">
			        <p><h:outputText value="#{candidateStory.content}" escape="false"></h:outputText> </p>
			        <p>来源：<h:outputText value="#{candidateStory.itemSource}" /></p>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default btn-lg" data-dismiss="modal"><span class="glyphicon glyphicon-off"></span> 关闭</button>
			        <h:commandLink class="btn btn-success btn-lg" action="#{candidateStoryReviewAction.approveStory}">
			        	<span class="glyphicon glyphicon-ok-sign"></span> 审核通过
			        </h:commandLink>
			        <h:inputHidden value="#{candidateStory.id}"></h:inputHidden>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->
			</h:panelGroup>
			</h:form>
			
			<!-- Modal -->
			<h:form id="date_picker_form">
			<h:panelGroup layout="block" id="date_picker_block">
			<div class="modal fade" id="datePickerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			        <h4 class="modal-title" id="myModalLabel"><h:outputText value="#{candidateStory.title}" /></h4>
			        <p><br /><h:outputText value="#{candidateStory.comment}" /></p>
			      </div>
			      <div class="modal-body">
			      	<p class="text-danger"><b>新条目将以下面日期进行对外发布</b></p>
		        	<div class="date-picker" data-date="2014/10/02">
		               <div class="date-container pull-left">
		                   <h4 class="weekday"></h4>
		                   <h2 class="date"></h2>
		                   <h4 class="year pull-right"></h4>
		               </div>
		               <span data-toggle="datepicker" data-type="subtract" class="fa fa-angle-left"></span>
		               <span data-toggle="datepicker" data-type="add" class="fa fa-angle-right"></span>
		               <div class="input-group input-datepicker">
		                   <input type="text" class="form-control" data-format="YYYY/MM/DD" placeholder="YYYY/MM/DD" />
		                   <span class="input-group-btn">
		                       <button class="btn btn-default" type="button">Go!</button>
		                   </span>
		               </div>
		               <span data-toggle="calendar" class="fa fa-calendar"></span>
		           	</div>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default btn-lg" data-dismiss="modal"><span class="glyphicon glyphicon-off"></span> 关闭</button>
			        <h:commandLink class="btn btn-success btn-lg" action="#{candidateStoryReviewAction.publishStory}" onclick="$('#date_picker_form\\:publish_data').val($('.date-picker').data('date'));">
			        	<span class="glyphicon glyphicon-send"></span> 发布
			        </h:commandLink>
			        <h:inputHidden value="#{candidateStory.id}"></h:inputHidden>
			        <h:inputHidden id="publish_data" value="#{candidateStory.publishDateString}" />
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->
			</h:panelGroup>
			</h:form>
		</ui:define>
		<ui:define name="insert-js-at-the-end">
			<script src="http://cdn.bootcss.com/moment.js/2.5.1/moment.min.js"></script>
			<script src="http://cdn.bootcss.com/moment.js/2.5.1/lang/zh-cn.js"></script>
			<script type="text/javascript">
				function initComponent(){
					moment.lang('zh-cn');
					$('.date-picker').data('date', moment().format('YYYY/MM/DD'));
				    $(window).on('focus', function(event) {
				        $('.show-focus-status > .alert-danger').addClass('hidden');
				        $('.show-focus-status > .alert-success').removeClass('hidden');
				    }).on('blur', function(event) {
				        $('.show-focus-status > .alert-success').addClass('hidden');
				        $('.show-focus-status > .alert-danger').removeClass('hidden');
				    });    
				    
				    $('.date-picker').each(function () {
				        var $datepicker = $(this),
				            cur_date = ($datepicker.data('date') ? moment($datepicker.data('date'), "YYYY/MM/DD") : moment()),
				            format = {
				                "weekday" : ($datepicker.find('.weekday').data('format') ? $datepicker.find('.weekday').data('format') : "dddd"),                
				                "date" : ($datepicker.find('.date').data('format') ? $datepicker.find('.date').data('format') : "MMMM Do"),
				                "year" : ($datepicker.find('.year').data('year') ? $datepicker.find('.weekday').data('format') : "YYYY")
				            };
				
				        function updateDisplay(cur_date) {    
				            $datepicker.find('.date-container > .weekday').text(cur_date.format(format.weekday));
				            $datepicker.find('.date-container > .date').text(cur_date.format(format.date));
				            $datepicker.find('.date-container > .year').text(cur_date.format(format.year));
				            $datepicker.data('date', cur_date.format('YYYY/MM/DD'));
				            $datepicker.find('.input-datepicker').removeClass('show-input');
				        }
				        
				        updateDisplay(cur_date);
				
				        $datepicker.on('click', '[data-toggle="calendar"]', function(event) {
				            event.preventDefault();
				            $datepicker.find('.input-datepicker').toggleClass('show-input');
				        });
				
				        $datepicker.on('click', '.input-datepicker > .input-group-btn > button', function(event) {
				            event.preventDefault();
				            var $input = $(this).closest('.input-datepicker').find('input'),
				                date_format = ($input.data('format') ? $input.data('format') : "YYYY/MM/DD");
				            if (moment($input.val(), date_format).isValid()) {
				               updateDisplay(moment($input.val(), date_format));
				            }else{
				                alert('Invalid Date');
				            }
				        });
				        
				        $datepicker.on('click', '[data-toggle="datepicker"]', function(event) {
				            event.preventDefault();
				            
				            var cur_date = moment($(this).closest('.date-picker').data('date'), "YYYY/MM/DD"),
				                date_type = ($datepicker.data('type') ? $datepicker.data('type') : "days"),
				                type = ($(this).data('type') ? $(this).data('type') : "add"),
				                amt = ($(this).data('amt') ? $(this).data('amt') : 1);
				                
				            if (type == "add") {
				                cur_date = cur_date.add(date_type, amt);
				            }else if (type == "subtract") {
				                cur_date = cur_date.subtract(date_type, amt);
				            }
				            
				            updateDisplay(cur_date);
				        });
				        
				    });
				}
				initComponent();
			</script>
		</ui:define>
	</ui:composition>
</h:body>
</html>